<template>
    <ProTable
        ref="proTableRef"
        :table="table"
        :data="table.data"
        controllerUrl="user"
        :page="table.page"
        :loading="table.isRefresh"
        :columns="columns"
        :headerActionTypes="['add', 'reset', 'import', 'export', 'delete', 'batchDelete', 'search', 'dynamicQuery']"
        :columnActionTypes="['reset', 'edit', 'assign', 'delete']"
        :dynamicQuery="table.dynamicQuery"
        :queryFormItems="queryFormItems"
        @onTableAction="onTableAction"
    >
        <template #form>
            <UserForm ref="formRef" @onTableAction="onTableAction"></UserForm>
            <AssignPermissionsForm ref="assignFormRef" label="name" :getDataApi="getAllRoles" @onTableAction="onTableAction"></AssignPermissionsForm>
            <ImportTable ref="importFormRef" :columns="columns" @onTableAction="onTableAction"></ImportTable>
        </template>
    </ProTable>
</template>

<script setup lang="tsx">
import { UserType } from '@/api/auth/user/type'
import { QueryFormItem } from '@/types/queryform'

const { table, formRef, importFormRef, assignFormRef, proTableRef, onTableAction } = useTable({
    api: new ProTableApi('user'),
    order: true,
    isPage: true,
})

const columns = reactive<Array<TableColumnType<UserType>>>([
    {
        type: 'selection',
        align: 'center',
    },
    {
        type: 'index',
        label: '序号',
        align: 'center',
    },
    {
        prop: 'name',
        label: '姓名',
        align: 'center',
    },
    {
        prop: 'userName',
        label: '用户名',
        align: 'center',
    },
    {
        prop: 'nickName',
        label: '昵称',
        align: 'center',
    },
    {
        prop: 'email',
        label: '邮箱',
        align: 'center',
        showOverflowTooltip: true,
    },
    {
        prop: 'phoneNumber',
        label: '电话',
        align: 'center',
        showOverflowTooltip: true,
    },
    {
        type: 'image',
        prop: 'avatar',
        label: '头像',
        align: 'center',
        width: '100',
    },
    {
        prop: 'gender',
        label: '性别',
        align: 'center',
        component: ({ row }: any) => {
            let gender = ''
            switch (row.gender) {
                case 1:
                    gender = '男'
                    break
                case 2:
                    gender = '女'
                    break
                case 3:
                    gender = '其他'
                    break
                default:
                    break
            }
            return <el-text>{gender}</el-text>
        },
    },
    {
        prop: 'age',
        label: '年龄',
        align: 'center',
    },
    {
        prop: 'address',
        label: '地址',
        align: 'center',
        showOverflowTooltip: true,
        component: ({ row }: any) => {
            if (!row.address[0]) {
                return
            }
            const address = `${row.address[0]}/${row.address[1]}/${row.address[2]}`
            return <span>{address}</span>
        },
    },
    {
        prop: 'description',
        label: '描述',
        align: 'center',
        showOverflowTooltip: true,
    },
    {
        prop: 'isEnabled',
        label: '状态',
        align: 'center',
        width: '90',
        component: (scope: any) => {
            const onChange = async () => {
                await onTableAction('enabled', { id: scope.row.id, message: scope.row.isEnabled ? '禁用' : '启用' })
            }
            return <el-switch inline-prompt active-text="启用" inactive-text="禁用" onChange={onChange} model-value={scope.row.isEnabled}></el-switch>
        },
    },
    {
        type: 'datetime',
        prop: 'createDateTime',
        default: 'YYYY-MM-DD HH:mm:ss',
        label: '创建时间',
        align: 'center',
        width: '200',
    },
])

const queryFormItems = reactive<Array<QueryFormItem<UserType>>>([
    {
        type: 'number',
        label: 'ID',
        name: 'id',
        placeholder: '用户ID',
    },
    {
        label: '姓名',
        name: 'name',
        placeholder: '模糊查询',
    },
    {
        label: '用户名',
        name: 'userName',
        placeholder: '模糊查询',
    },
    {
        label: '昵称',
        name: 'nickName',
        placeholder: '模糊查询',
    },
    {
        label: '邮箱',
        name: 'email',
        placeholder: '模糊查询',
    },
    {
        label: '电话',
        name: 'phoneNumber',
        placeholder: '模糊查询',
    },
    {
        type: 'range',
        label: '年龄范围',
        name: 'age',
    },
    {
        type: 'select',
        label: '性别',
        name: 'gender',
        options: (): SelectOptions[] => [
            { label: '男', value: 1 },
            { label: '女', value: 2 },
            { label: '其他', value: 3 },
        ],
    },
    {
        type: 'address',
        label: '地址',
        name: 'address',
    },
    {
        type: 'boole',
        label: '是否启用',
        name: 'isEnabled',
    },
    {
        type: 'select',
        label: '排序字段',
        sort: 'Sort',
        options: (): SelectOptions[] => {
            const options: SelectOptions[] = []
            columns.forEach((item) => {
                if (item.prop && item.label) {
                    options.push({ label: item.label, value: item.prop })
                }
            })
            return options
        },
    },
    {
        type: 'boole',
        label: '顺序',
        sort: 'Order',
        options: (): SelectOptions[] => [
            { label: '顺序', value: true },
            { label: '倒序', value: false },
        ],
    },
    {
        type: 'datetime',
        label: '创建时间',
        name: 'createDateTime',
        dateType: 'datetimerange',
    },
    {
        type: 'datetime',
        label: '更新时间',
        name: 'lastUpdateDateTime',
        dateType: 'datetimerange',
    },
    {
        type: 'datetime',
        label: '最后登录时间',
        name: 'lastLoginDateTime',
        dateType: 'datetimerange',
    },
])
</script>

<style lang="scss" scoped></style>
